<template>
  <div class="app-container">
    <el-dialog
    title="合作的园区平台"
    :visible.sync="visible"
    width="1200px"
    top="5vh"
    append-to-body
    >
      <el-form
            :model="queryParamsThree"
            ref="queryFormThree"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
          >
            <el-form-item label="企业名称" prop="newName">
              <el-input
                v-model="queryParamsThree.newName"
                placeholder="请输入企业名称"
                clearable
                @keyup.enter.native="handleQueryThree"
              />
            </el-form-item>
            <el-form-item label="所属行业" prop="industry">
              <el-select
                v-model="queryParamsThree.industry"
                placeholder="请选择所属行业"
                clearable
              >
                <el-option
                  v-for="dict in dict.type.customer_industry_garden"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="收发类型" prop="sendReceiveType">
              <el-select
                v-model="queryParamsThree.sendReceiveType"
                placeholder="请选择收发类型"
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQueryThree"
                >搜索</el-button
              >
              <el-button
                icon="el-icon-refresh"
                size="mini"
                @click="resetQueryThree"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            v-loading="loading"
            :data="managementThreeList"
            height="400"
            :row-style="{ height: '30px' }"
            border
            :cell-style="{ padding: '0px' }"
            highlight-current-row
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              prop="indexTwo"
              :index="indexMethodTwo"
            ></el-table-column>
            <el-table-column
              label="企业名称"
              align="center"
              min-width="220"
              prop="newName"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <!-- 使用按钮作为可点击元素，并绑定点击事件 -->
                <el-button
                  size="small"
                  v-if="scope.row.state == '2'"
                  @click="handleLook(scope.row.newId)"
                  type="text"
                  class="no-wrap"
                >
                  {{ scope.row.newName }}
                </el-button>
                <el-button
                  size="small"
                  v-else
                  type="text"
                  style="color: black"
                  class="no-wrap"
                >
                  {{ scope.row.newName }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              label="企业联系人"
              align="center"
              prop="contacts"
              width="100"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="联系电话"
              align="center"
              prop="phone"
              width="110"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="企业性质"
              align="center"
              prop="nature"
              width="110"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.enterprise_nature"
                  :value="scope.row.nature"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="所属行业"
              align="center"
              prop="industry"
              width="150"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.customer_industry_garden"
                  :value="scope.row.industry"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="合作理由"
              align="center"
              prop="cooperationReason"
              width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="状态"
              align="center"
              prop="state"
              width="70"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.collaborative_state"
                  :value="scope.row.state"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="收发类型"
              align="center"
              width="80"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <div
                  size="small"
                  type="text"
                  v-if="scope.row.initiatorId == enterpriseIdOrgId"
                >
                  我发起的
                </div>
                <div
                  size="small"
                  type="text"
                  v-if="scope.row.recipientId == enterpriseIdOrgId"
                >
                  我接收的
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total3 > 0"
            :total="total3"
            :page.sync="queryParamsThree.pageNum"
            :limit.sync="queryParamsThree.pageSize"
            @pagination="getThreeList"
          />
    </el-dialog>
  </div>
</template>

<script>
import {
  listManagement,
  listManagementType,
  getManagement,
  listManagementTwo,
  delManagement,
  addManagement,
  updateManagement,
} from "@/api/collaborative/management";
import { listDeptTwo, listDeptType, getDept } from "@/api/system/dept";
import { listApproval, addApproval } from "@/api/collaborative/approval";
import { listArea, getArea } from "@/api/area/area";
import FileView from "@/components/FileView/index";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Management",
  props: {
    enterpriseIdOrgId: {
      type: String,
      default: null,
    },
  },
  components: { FileView, Treeselect },
  dicts: [
    "enterprise_nature",
    "sys_normal_disable",
    "customer_industry",
    "customer_industry_serve",
    "customer_industry_garden",
    "sys_dept_type",
    "sys_org_type",
    "enterprise_source",
    "collaborative_state",
    "sys_org_type",
  ],
  data() {
    return {
      visible: false,
      activeName: "one",
      fileType: 2,
      fileType1: 2,
      openAdmin: false,
      disabledOne: true,
      disabledTwo: true,
      refreshKey: 0,
      collaborativeReason: "",
      reviewView: true,
      // 选中数组
      eIds: [],
      eName: [],
      index: null,
      indexTwo: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      cId: "",
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      total1: 0,
      total2: 0,
      total3: 0,
      // 【请填写功能名称】表格数据
      managementThreeList: [],
      reviewList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openExamine: false,
      options: [
        {
          value: "0",
          label: "我发起的",
        },
        {
          value: "1",
          label: "我接收的",
        },
      ],
      queryParamsThree: {
        pageNum: 1,
        pageSize: 15,
        industry: null,
        newName: null,
        sendReceiveType: null,
        collaborativeId: null,
        initiatorId: null,
        initiatorName: null,
        companyType: null,
        recipientId: null,
        recipientName: null,
        cooperationReason: null,
        state: null,
        createId: null,
        createName: null,
        operateTime: null,
        operateId: null,
        operateName: null,
        departmentId: null,
        departmentName: null,
        organizationId: null,
        organizationName: null,
        belongTo: null,
        orgId: null,
      },


      // 表单参数
      form: {},
      // 表单校验
      rules: {},

    };
  },
  created() {
    this.getThreeList();
  },
  methods: {
    // 显示弹框
    show() {
      this.loading = true;
      this.queryParamsThree.state = "2"
      this.queryParamsThree.companyType = "2";
      this.queryParamsThree.orgId = this.enterpriseIdOrgId;
      listManagement(this.queryParamsThree).then(response => {
        this.managementThreeList = response.rows;
        this.total3 = response.total;
        this.loading = false;
      });
      this.visible = true;
    },

    formatterNature(value) {
      var type = "";
      this.dict.type.enterprise_nature.forEach(item => {
        if (item.value == value) type = item.label;
      });
      return type;
    },
    formatterIndustry(value, index) {
      var type = "";
      if (index == "0") {
        this.dict.type.customer_industry.forEach(item => {
          if (item.value == value) type = item.label;
        });
      }
      if (index == "1") {
        this.dict.type.customer_industry_serve.forEach(item => {
          if (item.value == value) type = item.label;
        });
      }
      if (index == "2") {
        this.dict.type.customer_industry_garden.forEach(item => {
          if (item.value == value) type = item.label;
        });
      }
      return type;
    },

    handleLook(enterpriseId) {
      this.$router.push("/collaborative/detail/" + enterpriseId);
    },

    area() {
      listArea({}).then(response => {
        this.options = response.data;
      });
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.areaId,
        label: node.areaName,
        isDisabled: false,
        children: node.list,
      };
    },


    // 取消按钮
    cancel() {
      this.openExamine = false;
      this.resetReview();
    },

    // 表单重置
    reset() {
      this.form = {
        collaborativeId: null,
        initiatorId: null,
        initiatorName: null,
        recipientId: null,
        recipientName: null,
        cooperationReason: null,
        state: null,
        createId: null,
        createName: null,
        createTime: null,
        operateTime: null,
        operateId: null,
        operateName: null,
        departmentId: null,
        departmentName: null,
        organizationId: null,
        organizationName: null,
        belongTo: null,
        delFlag: null,
      };
      this.resetForm("form");
    },

    handleQueryThree() {
      this.queryParamsThree.pageNum = 1;
      this.getThreeList();
    },
    /** 重置按钮操作 */
    resetQueryThree() {
      this.resetForm("queryFormThree");
      this.handleQueryThree();
    },
    close() {
      this.open = false;
    },
  },
};
</script>
<style scoped>
.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding: 0;
}

::v-deep .el-table .cell {
  white-space: nowrap;
}


</style>
